<template>
  <GlobalContainer className="!bg-[#fff]" :backgroundImage="`${OSS_URL}/images/gengduo/gengduo_bg.png`">
    <GlobalHeader title="更多服务" :fixed="true" showBack :backgroundImage="`${OSS_URL}/images/gengduo/gengduo_bg.png`" />
    <div class="subtitle spacing-8 relative mb-30 ml-55 mt-24 h-70 text-34 font-bold leading-70 text-[#1e2e4c]">
      <image src="../../static/images/gengduo/title_bg.png" class="absolute -left-16 top-0 h-70 w-104" />
      <span class="">小区服务</span>
      <span class="text-[rgb(30,144,255)]">电话</span>
    </div>
    <div class="min-h-700 rounded-20 bg-[#fff] px-40 pt-30">
      <div class="service-box">
        <div class="search-c flex h-88 items-center px-24 py-20">
          <div class="icon">
            <image src="../../static/images/gengduo/search.png" class="size-40" />
          </div>
          <input v-model="searchValue" class="ml-20 flex-1" maxlength="50" confirm-type="search" placeholder="请输入" />
        </div>
        <div v-for="item in list" :key="item.id" class="service-item flex items-center border-b-1 border-[#E6E8EB] py-32">
          <div class="left text-28 leading-45 text-[#303133]">
            <div>{{ item.name }}</div>
            <div class="mt-10 font-normal leading-42">{{ item.phone }}</div>
          </div>
          <div class="right ml-auto" @tap.stop="payPhone(item.phone)">
            <image src="../../static/images/gengduo/phone_icon.png" class="size-88" />
          </div>
        </div>
        <div class="empty-box py-48" v-if="phoneList.length === 0">
          <div class="empty-text text-center text-32 text-[#666]">暂无电话</div>
        </div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { getAddressBook } from '@/common/api/common'
import { useAccountStore } from '@/store'
const accountStore = useAccountStore()

const OSS_URL = import.meta.env.VITE_OSS_URL
const phoneList = ref([])
onMounted(async () => {
  const res = await getAddressBook({
    pageNo: 1,
    pageSize: 9999,
    name: searchValue.value,
    communityId: accountStore.currentRoom?.communityId || ''
  })
  phoneList.value = res.records
})
const payPhone = phone => {
  if (phone) {
    wx.makePhoneCall({
      phoneNumber: phone
    })
  } else {
    showToast('暂无电话')
  }
}
const searchValue = ref('')
const list = computed(() => {
  if (searchValue.value) {
    return phoneList.value.filter(item => item.name.includes(searchValue.value))
  }
  return phoneList.value
})
</script>

<style scoped lang="scss">
.search-c {
  background: #f5f7fa;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 1px solid #dcdfe6;
}
</style>
